<template>
    <div>
        <el-header>
            <div>
            <img :src="logoImg" height="60">
            </div>
            <el-dropdown>
                <div class="block">
                    <el-avatar :size="50" src="https://img01.yzcdn.cn/vant/cat.jpeg"
                               style="cursor: pointer;"></el-avatar>
                </div>
                <el-dropdown-menu slot="dropdown" trigger="click">
                    <el-dropdown-item>
                        <span type="danger"><span class="el-icon-house"></span> &nbsp;系统首页</span>
                    </el-dropdown-item>

                    <el-dropdown-item>

                        <span type="danger" @click="logout"><span
                                class="el-icon-switch-button"></span> &nbsp;退出登入</span>

                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-row class="tac">
            <el-col :span="4">
                <Menus @changeActive="setActive"/>
            </el-col>
            <el-col :span="20">
                <div v-if="active === 1">
                    <Echarts/>
                </div>
                <div v-if="active === 2">
                    <Product/>
                </div>
                <div v-if="active === 3">
                    <admin-category/>
                </div>
                <div v-if="active === 4">
                    <admin-order/>
                </div>
                <div v-if="active === 5">
                    <admin-user/>
                </div>

            </el-col>
        </el-row>

    </div>
</template>

<script>

    import Menus from "../components/Menus";
    import AdminHeader from "../components/Header";
    import Echarts from "../components/Echarts";
    import Product from "../product/Product";
    import AdminCategory from "../category/Category";
    import AdminOrder from "../order/Order";
    import AdminUser from "../user/User";

    export default {
        name: "adminIndex",
        components: {AdminUser, AdminOrder, AdminCategory, Product, Echarts, AdminHeader, Menus},
        data() {
            return {
                userInfo: {},
                active: 1,
                logoImg:require("../img/logo.png")
            }
        },
        mounted() {
            this.getUserInfo()
        },
        methods: {
            getUserInfo() {
                this.userInfo = this.$store.state.userInfo
            },
            logout() {
                alert("logout")
            },
            setActive(active) {
                this.active = active
            }
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: #001529;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-size: 19px;

        padding-left: 0px;
    }

    .el-aside {
        background-color: #001529
    }

    .el-main {
        background-color: #eaedf1;
    }

    .home-container {
        width: 100%;
        height: 100% !important;
    }

    .toggle-btn {
        background-color: #2d8cf0 !important;
        font-size: 10px;
        line-height: 24px;
        color: #fff;
        text-align: center;
        letter-spacing: 0.2em;
        cursor: pointer;
    }
</style>
